<template>
    <div class="Chkaijiang">
        <div class="guding">
            <div class="headerone">
                <span class="src" @click="fanhui"></span>
                <span class="title">我的投注</span>
            </div>
            <mt-navbar v-model="selected" class="zhubu">
                <mt-tab-item id="1">
                    <span class="ml"> 全部</span>
                </mt-tab-item>
                <mt-tab-item id="2">
                    <span class="ml"> 待开奖</span>
                </mt-tab-item>
                <mt-tab-item id="3">
                    <span class="ml"> 已中奖</span>
                </mt-tab-item>
            </mt-navbar>

        </div>
        <!-- tab-container -->

        <mt-tab-container v-model="selected" class="fubu">
            <mt-tab-container-item id="1">
                <div class="touzhu" v-for="item in data" :key=item.id v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=0 infinite-scroll-immediate-check=false>
                    <div class="touzhuone">
                        <span> {{item.periods}}期</span>
                        <span class="f_right">幸运28竞猜</span>
                    </div>
                    <div class="touzhutwo">{{item.category}}
                        <span class="round">{{item.content}}</span>
                        <span class="dai f_right">{{item.win==0?"未开奖":item.win>0?"已中奖":"未中奖"}}</span>
                    </div>
                    <div class="qi">{{item.addtime}}
                        <span class="f_right" style="font-size:0.3rem">{{item.win>0?"+"+item.win:item.win}}</span>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="touzhu" v-for="item in weidata" :key=item.id v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=0 infinite-scroll-immediate-check=false>
                    <div class="touzhuone">
                        <span> {{item.periods}}期</span>
                        <span class="f_right">幸运28竞猜</span>
                    </div>
                    <div class="touzhutwo">{{item.category}}
                        <span class="round">{{item.content}}</span>
                        <span class="dai f_right">{{item.win==0?"未开奖":item.win>0?"已中奖":"未中奖"}}</span>
                    </div>
                    <div class="qi">{{item.addtime}}
                        <span class="f_right" style="font-size:0.3rem">{{item.win>0?"+"+item.win:item.win}}</span>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <div class="touzhu" v-for="item in yidata" :key=item.id v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=0 infinite-scroll-immediate-check=false>
                    <div class="touzhuone">
                        <span> {{item.periods}}期</span>
                        <span class="f_right">幸运28竞猜</span>
                    </div>
                    <div class="touzhutwo">{{item.category}}
                        <span class="round">{{item.content}}</span>
                        <span class="dai f_right">{{item.win==0?"未开奖":item.win>0?"已中奖":"未中奖"}}</span>
                    </div>
                    <div class="qi">{{item.addtime}}
                        <span class="f_right" style="font-size:0.3rem">{{item.win>0?"+"+item.win:item.win}}</span>
                    </div>
                </div>
            </mt-tab-container-item>

        </mt-tab-container>

        <!-- <div>
            <div style="float:left ">555555555555555555555555555555555</div>
            <div id="slider " class="mui-slider " style="float:left ">
                <div id="sliderSegmentedControl " class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ">
                    <div class="mui-scroll ">
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                    </div>
                </div>

            </div>
        </div> -->
    </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js";
import { Toast } from "mint-ui";
import { Indicator } from "mint-ui";
export default {
    data() {
        return {
            selected: "1",
            data: [],
            page: 1,
            loading: null,
            weidata: [],
            yidata: []
        };
    },
    mounted() {
        this.touzhu();

        // 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
        // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
        // 2. 初始化滑动控件
    },
    methods: {
        loadMore() {
            this.loading = true;
            setTimeout(() => {
                ++this.page;
                this.touzhu();
                this.loading = false;
            }, 2500);
        },
        touzhu() {
            this.$http
                .get("api/Luckyorder/index?uid=1&page="+this.page+"&status=0")
                .then(result => {
                    if (result.body.code == 1000) {
                        result.body.data.forEach(element => {
                            this.data.push(element);
                        });
                        console.log(1);
                    } else {
                        Toast("数据获取失败");
                    }
                });
        },
        weikaijiang() {
            this.$http
                .get(
                    "api/Luckyorder/index?uid=1&page=" + this.page + "&status=1"
                )
                .then(result => {
                    if (result.body.code == 1000) {
                        result.body.data.forEach(element => {
                            this.weidata.push(element);
                        });
                    } else {
                        Toast("待开奖暂无数据");
                    }
                });
        }, //
        yikaijiang() {
            this.$http
                .get(
                    "api/Luckyorder/index?uid=1&page=" + this.page + "&status=2"
                )
                .then(result => {
                        console.log(result)
                    if (result.body.code == 1000) {
                        result.body.data.forEach(element => {
                            this.yidata.push(element);
                        
                        });
                    } else {
                        Toast("已开奖暂无数据");
                    }
                });
        }, //
        fanhui: function() {
            this.$router.go(-1);
        }
    },
    watch: {
        selected: function(newValue) {
            if (newValue == 2) {
                this.weidata = [];
                this.page = 1;
                this.weikaijiang();
            } else if (newValue == 1) {
                this.data = [];
                this.page = 1;
                this.touzhu();
            } else if (newValue == 3) {
                this.yidata = [];
                this.page = 1;
                this.yikaijiang();
            }
        }
    }
};
</script>
<style lang="scss" scoped>
span {
    display: inline-block;
}

.Chkaijiang {
    .round {
        text-align: center;
        font-size: 0.3rem;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        border: 1px solid #d51313;
        color: #d51313;
        margin: 0rem 0rem 0rem 0.43rem;
        line-height: 0.7rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .touzhu {
        height: 2.2rem;
        width: 90%;
        background: #fff;
        margin: 0rem auto;
        margin-bottom: 0.2rem;
        padding: 0.2rem 0.2rem;
        border-radius: 5px;
        .touzhuone {
            position: relative;
            .qi {
                font-size: 0.22rem;
                color: #9e9eac;
            }
        }
        .touzhutwo {
            font-size: 0.3rem;
            line-height: 1rem;
            position: relative;
            .dai {
                font-size: 0.3rem;

                color: #d51313;
            }
        }
    }
    .guding {
        position: fixed;
        width: 100%;
        z-index: 99;
    }
    .headerone {
        width: 100%;
        background: red;
        height: 1rem;
        text-align: center;
        padding: 0 0.3rem;
        line-height: 1rem;
        .title {
            color: #fff;
            font-size: 0.36rem;
            margin: 0 auto;
        }
        .src {
            background: url("../../img/Game/返回2.png");
            height: 0.37rem;
            width: 0.17rem;
            background-size: 0.17rem 0.37rem;
            float: left;
            position: relative;
            top: 0.3rem;
        }
    }
    .zhubu {
        .mint-tab-item {
            border-bottom: 0.03rem solid #e0e0e0;
        }
        .is-selected {
            border-bottom: 0.03rem solid #d51313;
            color: #d51313;
            margin-bottom: 0px;
        }
        .ml {
            font-size: 0.32rem;
        }
    }

    .fubu {
        padding-top: 2.3rem;
    }
}
</style>

